<template>
  <div class="box">
    <div class="box-con">
      <div class="fen-leftww">
        <div class="geixiang">
          <p class="shofang">
            <i class="el-icon-house"> </i> 首页 <span class="gang">/</span>正文
          </p>
          <h1>{{ ggb.title }}</h1>
          <span style="margin-right: 10px">
            <i class="el-icon-date"> </i> 发表于 {{ ggb.updateTime }}</span
          >
          <span style="margin-right: 10px">
            <i class="el-icon-folder-opened"> </i>分类于
            {{ ggb.categoryName }}</span
          >
          <span> <i class="el-icon-view"></i> 阅读量 {{ ggb.readNum }}</span>
          <p class="xiang-zhu">{{ ggb.title }}</p>
          <div class="baoguo">
            <div
              class="xiang-yier"
              v-for="(item, index) in ggb.tags"
              :key="index"
            >
              #{{ item.name }}
            </div>
          </div>
        </div>
        <div class="shangxia">
          <div
            v-if="ggb.preArticle != null"
            style="padding: 1.3rem"
            @click="shangyi(ggb.preArticle.id)"
          >
            <span> 上一篇</span>
            <p>{{ ggb.preArticle.title }}</p>
          </div>
          <div v-else class="shangxia"></div>
          <div
            v-if="ggb.nextArticle"
            style="padding: 1.3rem"
            @click="xiayi(ggb.nextArticle.id)"
          >
            <span>下一篇 ></span>
            <p>{{ ggb.nextArticle.title }}</p>
          </div>
        </div>
      </div>
      <div class="right" el-icon-eleme>
        <div class="right-tou">
          <img :src="cxk.avatar" alt="" />
          <h3>{{ cxk.author }}</h3>
          <p>{{ cxk.introduction }}</p>
        </div>
        <div class="fenleik">
          <h3 style="margin-left: 10px">分类</h3>
          <div
            class="fenlei"
            @click="Fenxiang(item.id)"
            v-for="(item, index) in csshu"
            :key="index"
          >
            <div class="fen-con">
              <i class="el-icon-folder-opened"></i>
              {{ item.name }}
            </div>
          </div>
        </div>
        <div class="biaoqian">
          <h3 class="qianzi">标签</h3>
          <div style="width: 90%; margin: 0 auto">
            <div
              style="display: inline-block"
              v-for="(item, index) in biaoqian"
              :key="index"
              class="bianqianzi"
            >
              {{ item.name }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="box-xia">
      <div class="box-xia-com">
        <div>
          © 2023
          <span>Weblog™.</span>
          All Rights Reserved.
        </div>
        <div>Provided by <span>犬小哈</span></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      articleId: "",
      cxk: {},
      ggb: {
        title: "",
        updateTime: "",
        categoryName: "",
        readNum: "",
        tags: [],
        preArticle: { title: "" },
        nextArticle: { title: "" },
      },
      csshu: [],
      biaoqian: [],
    };
  },
  created() {
    this.articleId = this.$route.query.articleId;
    console.log(this.articleId);
    if (this.articleId) {
      this.getXi(this.articleId);
    }
    this.getAdd();
    this.getFen();
    this.getBiao();
  },
  methods: {
    Fenxiang(id) {
      this.$router.push({
        path: "/home/fenxiang",
        query: { categoryId: id },
      });
    },
    shangyi(articleId) {
      this.getXi(articleId);
    },
    xiayi(articleId) {
      this.getXi(articleId);
    },
    async getBiao() {
      let res = await this.$axios.post(
        "http://47.104.167.34:9110/api/tag/list"
      );
      console.log(res);
      this.biaoqian = res.data.data;
    },
    async getFen() {
      let res = await this.$axios.post(
        "http://47.104.167.34:9110/api/category/list"
      );
      // console.log(res);
      this.csshu = res.data.data;
    },
    async getXi(articleId) {
      let res = await this.$axios.post(
        "http://47.104.167.34:9110/api/article/detail",
        {
          articleId: articleId,
        }
      );
      console.log(res);
      this.ggb = res.data.data;
    },
    async getAdd() {
      let res = await this.$axios.post(
        "http://47.104.167.34:9110/api/blog/setting/detail"
      );
      //   console.log(res);
      this.cxk = res.data.data;
    },
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
.box {
  /* margin-top: 20rem; */
  background-color: #f4f4f4;
  width: 100%;
  /* height: 100vh; */
  margin-top: 4.625rem;
}

.box-con {
  width: 80%;
  padding-top: 1.25rem;
  margin: 0 auto;
  display: flex;
  /* justify-content: space-between; */
  justify-content: flex-start;
  gap: 2rem;
}

.box-leftt {
  width: 64.125rem;
  /* height: 106.25rem; */
  display: flex;
  justify-content: space-around;
  align-content: space-between;
  flex-wrap: wrap;
}
.fen-leftww {
  width: 64.125rem;
  height: 20.625rem;
  background-color: #fff;
  padding-bottom: 1.25rem;
}
.right {
  width: 17.5rem;
}

.right-tou {
  height: 12rem;
  width: 17.5rem;
  background-color: #fff;
  border-radius: 0.375rem;
  text-align: center;
}

.right-tou img {
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 50%;
  margin-top: 1.25rem;
}

.right-tou p {
  color: #6b7280;
}
.geixiang {
  text-align: left;
  margin-top: 1.25rem;
  margin-left: 1.25rem;
  border-bottom: 1px solid #d0cdcd;
}
.gang {
  margin: 0 0.625rem;
}
.xiang-zhu {
  margin: 1.25rem 0;
}
.baoguo {
  display: flex;
}
.xiang-yier {
  background-color: #20c8574a;
  margin: 0.125rem;
  padding: 0.375rem;
  border-radius: 0.375rem;
  /* width: 3.125rem; */
  text-align: left;
  display: inline-block;
}
.box-xia {
  width: 100%;
  height: 4.375rem;
  background-color: #fff;
  margin-top: 1.875rem;
}
.box-xia-com {
  width: 80%;
  margin: 0 auto;
  margin-top: 3.125rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 4.375rem;
}
.fenleik {
  width: 17.5rem;
  background-color: #fff;
  border-radius: 0.375rem;
  margin-top: 1.25rem;
  padding-top: 0.625rem;
  text-align: left;
}
.fenlei {
  width: 14.375rem;
  height: 1.875rem;
  line-height: 2.25rem;
  margin: 0 auto;
}
.biaoqian {
  /* display: flex; */
  /* width: 17.5rem; */
  background-color: #fff;
  border-radius: 0.375rem;
  margin-top: 1.25rem;
  padding-top: 0.625rem;
  /* flex-wrap: wrap; */
  text-align: left;
}
.qianzi {
  width: 5rem;
  margin-left: 1.25rem;
  text-align: left;
}
.bianqianzi {
  background-color: #20c8574a;
  margin: 0.125rem;
  padding: 0.1875rem;
  border-radius: 0.375rem;
}
.ererk {
  display: flex;
  /* width: 3.75rem; */
}
.yier {
  background-color: #20c8574a;
  padding: 0.375rem;
  border-radius: 0.375rem;
  margin-left: 1.25rem;
  /* margin-top: 1.25rem; */
  /* display: inline-block; */
}
.fen-con:hover {
  border-radius: 8px;
  background-color: #dad9d9;
  color: rgb(33, 130, 209);
}
.shangxia {
  display: flex;
  justify-content: space-between;
}
</style>